<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="../css/userpage.css" rel="stylesheet">
     	<style>
     		.indexBox{
     			margin: 0;
     			padding: 0;
     			list-style: none;
     		}
     	</style>
	</head>


	<body>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<!-- 主界面不动、菜单移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
		  <!-- 菜单容器 -->
		  <aside class="mui-off-canvas-left" id="offCanvasSide">
		    <div class="mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 菜单具体展示内容 -->
<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" onclick="location='myat.html'">
									我的文章
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" onclick="location='following.html'">
									我的关注
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right"  onclick="location='chatbox.html'">
									我的消息
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									
								</a>我的赞
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									我的收藏
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">
									设置
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right" href="../index.html">
									注销
								</a>
							</li>							
						</ul>
		      </div>
		    </div>
		  </aside>
		  <!-- 主页面容器 -->
		  <div class="mui-inner-wrap">
		    <!-- 主页面标题 -->
		    <header class="mui-bar mui-bar-nav">
		      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
		      <h1 class="mui-title">我的主页</h1>
		      		      <a class="mui-icon mui-action-menu mui-icon-compose mui-pull-right" onclick="location='writepage.html'"></a>
		    </header>
		    <nav class="mui-bar mui-bar-tab">
			    <a class="mui-tab-item" onclick="location='homepage.html'">
			        <span class="mui-icon mui-icon-home"></span>
			        <span class="mui-tab-label"></span>
			    </a>
			    <a class="mui-tab-item"  onclick="location='chatbox.html'">
			        <span class="mui-icon mui-icon-chatboxes"></span>
			        <span class="mui-tab-label"></span>
			    </a>
			    <a class="mui-tab-item  mui-active">
			        <span class="mui-icon mui-icon-person"></span>
			        <span class="mui-tab-label"></span>
			    </a>
			</nav>
		    <div class="mui-content mui-scroll-wrapper">
		      <div class="mui-scroll">
		        <!-- 主界面具体展示内容 -->
		        <br>
		        <div class="firstBlock">
				<img src="../img/profile.jpg"/>
				<h4>username</h4>
				<p>self </p>
				<br>
				</div>
				<div style="height:80px;box-shadow: 3px 3px 2px #DDDDDD;">
				<button class="pull-right" id="followButton"><a onclick="this.innerHTML='已关注'">关注</a></button>
				<a class="secondBlock" onclick="location='following.html'">关注数</a><a class="secondBlock">粉丝数</a><a class="secondBlock">博文数</a>
				</div>
				<div>
					<h5>我的文章(<b id="Noa"></b>)</h5>
				<ul style="padding: 0;">					
				</ul>
				</div>
		    </div>  
		    <div class="mui-off-canvas-backdrop"></div>
		  </div>
		</div>

	</body>
	<script>
function newblok(i){
			var at = "a"+i;
			at.toString();
			var h = "h"+i;
			h.toString();
			
			var header = window.localStorage.getItem(h);
			var article = window.localStorage.getItem(at);
			var username = window.localStorage.username;
			 
			var mcontent = document.getElementsByTagName("ul")[1];
			var a = document.createElement("li");
			a.setAttribute('class','indexBox');
			var b = document.createElement('div');
			b.setAttribute('class','container');
			var c = document.createElement('img');
			c.setAttribute('src','../img/profile.jpg');
			c.setAttribute('onclick','location="userpage.html"');
			var d = document.createElement('a');
			d.innerHTML=username;
			d.setAttribute('onclick','location="userpage.html"');
			var e = document.createElement('small');
			e.setAttribute("font-size","15px");
			e.innerHTML="发布";
			var f = document.createElement('b');
			f.innerHTML=header;
			f.setAttribute('onclick','sendheader(this)');
			var g = document.createElement('p');
			g.innerHTML=article;
			g.setAttribute('onclick','location="article.html"');
			var z =document.createElement("br");
			
			
				var h = document.createElement('span');
				var i = document.createElement('a');
				i.setAttribute("class",a);
				i.setAttribute("class","mi mui-icon mui-icon-more pull-right");
				h.append(i);
				
				var j = document.createElement('span');
				var k = document.createElement('a');
				k.setAttribute("class",a);
				k.setAttribute("class","mi mui-icon mui-icon-email pull-right");
				j.append(k);

			
			b.append(c);
			b.append(d);
			b.append(d);
			b.append(e);
			b.append(f);
			b.append(h);
			b.append(g);
			b.append(j);
			b.append(z);
			a.append(b);
						
			mcontent.append(a);
		};
		
				function sendheader(a){
			var hd = a.innerHTML;			
			
			var noa = window.localStorage.getItem("noa");
			for(var i=0;i<noa;i++){
				var a = i;
				a++;
				var h = "h"+a;
				h.toString();
				var noad = window.localStorage.getItem(h);
				if(hd==noad){
					var aa = "a"+a;
					aa.toString();
					var at=window.localStorage.getItem(aa);
					
					window.localStorage.setItem("thisat",at);
					window.localStorage.setItem("thishd",hd);
					
					window.location.href="article.html";
				}
			}
		};
		
				function dasdd(){
			//var Request=new UrlSearch(); 
			if(window.localStorage.noai!=window.localStorage.noa){
			var header = getQueryString('header');
			var article = getQueryString('article');
			window.localStorage.hd=header;
			window.localStorage.at=article;
			}
		};
		
					window.onload=function(){
				var Username = document.getElementsByTagName('h4');
				Username[0].innerHTML=window.localStorage.username;		
				var Username = document.getElementsByTagName('p');
				Username[0].innerHTML=window.localStorage.profile;
				var Noa = document.getElementById('Noa');
				Noa.innerHTML = window.localStorage.noa;

				var noa = window.localStorage.noa;
				for(var i=noa;i>0;i--){
					newblok(i);
				}
			};
	</script>
</html>